<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            border: 1px solid #ff0000;
        }
    </style>
</head>
<body>

    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        // 1、获取元素
        var myCanvas = document.querySelector("#canvas");
        var ctx = myCanvas.getContext("2d");
        
        var canvasWidth = ctx.canvas.width;
        var canvasHeight = ctx.canvas.height;

        // 1、绘制网格
        // 2、网格的大小
        // var girdSize = 20;
        // // 3、画多少条X轴方向的线(横线) 与高度有关
        // // var canvasHeight = myCanvas.height;//通过dom操作
        // var xLineTotal = Math.floor(canvasHeight / girdSize);
        // for (let i=0;i<=xLineTotal;i++) {
        //     ctx.beginPath();
        //     ctx.moveTo(0, i * girdSize - 0.5);
        //     ctx.lineTo(canvasWidth, i * girdSize - 0.5);
        //     ctx.strokeStyle = "#AAA";
        //     ctx.stroke();
        // }

        // // 4、画多少条Y轴方向的线(竖线)
        // var yLineTotal = Math.floor(canvasWidth / girdSize);
        // for (let i = 0; i <= yLineTotal; i++) {
        //     ctx.beginPath();
        //     ctx.moveTo(i * girdSize + 0.5,0);
        //     ctx.lineTo(i * girdSize + 0.5,canvasHeight);
        //     ctx.strokeStyle = "#AAA";
        //     ctx.stroke();
        // }

        //绘制坐标轴
        var space = 20;//原点及两轴末端距离画布边缘的大小
        var arrowSize = 10;//箭头的大小,箭头三角形底边10，高10

        //定位原点
        var x0 = space;
        var y0 = canvasHeight - space;

        //绘制X轴
        ctx.moveTo(x0,y0);
        ctx.lineTo(canvasWidth - space, y0);//箭头的点
        ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
        ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
        ctx.lineTo(canvasWidth - space, y0);
        ctx.stroke();
        ctx.fill();
        
        //绘制y轴
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.lineTo(x0, space);//箭头的点
        ctx.lineTo(x0 - arrowSize / 2, space + arrowSize);
        ctx.lineTo(x0 + arrowSize / 2, space + arrowSize);
        ctx.lineTo(x0, space);
        ctx.stroke();
        ctx.fill();



    </script>
</body>
</html>